<template>
  <section class="order-detail-good">
    <div class="top" @click="handleSkipOrderDetail">
      <div class="left">
        <img
          :src="`http://elm.cangdu.org/img/${doc.restaurant_image_url}`"
          alt=""
        />
        <span>{{ doc.restaurant_name }}</span>
      </div>
      <span class="right"></span>
    </div>
    <ul class="center" v-if="doc.basket">
      <li v-for="(item, index) in doc.basket.group[0]" :key="index">
        <span class="name">
          {{ item.name }}
        </span>
        <span class="quantity"> <i>X</i>{{ item.quantity }} </span>
        <span class="price"> ¥{{ item.price }} </span>
      </li>
      <li>
        <span>{{ doc.basket.deliver_fee.name }}</span>
        <span>{{ doc.basket.deliver_fee.price }}</span>
      </li>
      <li class="amount">实付{{ doc.total_amount.toFixed(2) }}</li>
    </ul>
  </section>
</template>

<script>
import { skipShopMixin } from "common/mixin";
export default {
  props: {
    doc: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  mixins: [skipShopMixin],
};
</script>
<style lang="less" scoped>
@import url("assets/css/mixin");
.order-detail-good {
  margin: 10px 0;
  background-color: #fff;
  color: #666666;
  .top,
  .center li {
    border-bottom: 1px solid #eaeaea;
  }
  .top {
    .set-flex();
    padding: 10px;
    font-weight: 700;
    color: #333333;
    .left {
      span {
        margin-left: 10px;
      }
    }
    img {
      width: 30px;
      height: 30px;
      vertical-align: middle;
    }
    .right {
      .right-arrow();
    }
  }

  .center {
    font-weight: 700;
    font-size: 14px;
    li {
      padding: 20px 10px;
      .set-flex();
      .name {
        flex: 1;
      }
      .quantity {
        color: #cfcfcf;
        i {
          font-size: 10px;
        }
      }
      .price {
        width: 60px;
        text-align: right;
      }
    }
    .amount {
      justify-content: flex-end;
      font-weight: 900;
      color: #fb6b23;
    }
  }
}
</style>